<template>
  <van-nav-bar :title="title">
    <template #left>
      <van-icon
        class="icon"
        name="arrow-left"
        color="#999"
        @click="goBack"
      />
      <slot name="title" />
    </template>
    <template #right>
      <slot />
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  methods: {
    goBack() {
      this.$emit('goback');
      this.$emit('goArticleDetail');
    },
  },
}
</script>

<style lang="less" scoped>
.icon {
  margin-right: 16px;
}
</style>
